<!-- 下拉刷新、下拉加载列表 组件 -->
<script>
export default {
  name: '',
  props: {
    // 查询参数
    params: {
      type: Object,
      default: () => ({}),
    },
    // 加载请求接口
    request: {
      type: Function,
    },
    // 自定义的查询参数处理方法，可用于添加和修改查询参数
    dealQueryFun: {
      type: Function,
      default: null,
    },
    // 自定义的返回数据处理方法，可用于添加和修改查询参数
    dealDataFun: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      query: {
        pageNum: 1,
        pageSize: 10,
        type: '',
      },
      refreshing: false,
      finished: false,
      finishedText: '',
      error: false,
      list: [
        // {
        //   state: '跟进',
        //   content: 'asdfasdf请求失败，点击重新加载d',
        //   customerName: 'aaa森岛帆高色',
        //   sendTime: '1010-12-12 32:32:23',
        // },
        // {
        //   title: 'ssdsdssfsdfs',
        //   content: 'ssdsdssfsdfs',
        //   notificationTime: 'ssdsdssfsdfs',
        // },
        // {
        //   title: 'ssdsdssfsdfs',
        //   content: 'ssdsdssfsdfs',
        //   notificationTime: 'ssdsdssfsdfs',
        // },
      ],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getList(page) {
      this.loading = true
      this.finished = false
      page && (this.query.pageNum = page)

      Object.assign(this.query, this.params)
      this.dealQueryFun && this.dealQueryFun(this.query)
      this.query = Object.assign({ pageNum: 1, pageSize: 10 }, this.query)

      this.request(this.query)
        .then(({ rows, total }) => {
          if (this.query.pageNum == 1) {
            this.list = []
          }
          this.dealDataFun && this.dealDataFun(rows)

          this.list.push(...rows)
          this.loading = false
          this.refreshing = false
          // 数据全部加载完成
          if (this.list.length >= +total) {
            if (this.list.length == 0) {
              this.query.pageNum = 1
              this.finishedText = ''
            } else {
              this.finishedText = '没有更多了'
            }
            this.finished = true
          } else {
            this.query.pageNum++
          }
        })
        .catch(() => {
          this.error = true
          this.loading = false
          this.finished = true
        })
    },
  },
}
</script>

<template>
  <van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="getList(1)">
    <van-list
      v-model="loading"
      :finished="finished"
      :finished-text="finishedText"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      @load="getList()"
    >
      <Empty v-if="!error && !loading && (!list || !list.length)" />
      <slot v-bind="list"></slot>
    </van-list>
  </van-pull-refresh>
</template>

<style lang="less" scoped></style>
